<template>
  <el-dialog
      :title= titleName
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="handleOffDialog"
      width="30%"
  >
    <el-select v-model="selectItem" size="mini" placeholder="请选择" style="width: 100%;margin-bottom: 20px;" @change="selectChange">
      <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.fieldName"
          :value="item.fieldCode"
      >
      </el-option>
    </el-select>

    <el-input
        v-if="selectType === 'input'"
        type="textarea"
        :rows="4"
        size="mini"
        v-model="fillData"
    />

    <el-input
        v-if="selectType === 'number'"
        type="input"
        v-model.number="fillData"
        size="mini"
        @input="judgmentNumber"
    />

    <el-date-picker
        v-if="selectType === 'date'"
        v-model="fillData"
        size="mini"
        type="date"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
    />

    <el-cascader
        v-if="selectType === 'tree' || selectType === 'radio'"
        style="width: 100%;"
        class="my-cascader"
        v-model="fillData"
        size="mini"
        :options="cascaderOptions"
        :props="{
        value: 'uuid',
		    label: 'name'
      }"
    />

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleOffDialog">关闭</el-button>
      <el-button type="primary" size="mini" @click="handleEditDialog">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import {queryCondition} from "@/api/apiUrl";

export default {
  name: 'EditChildren',
  data() {
    return {
      dialogVisible: false,
      options: [],
      cascaderOptions: [],
      titleName: '',
      selectItem: undefined, // 下拉选中数据
      selectType: undefined, // 选中的状态
      fillData: undefined, // 填写数据
      uuids: [] // 选中人员数据
    }
  },
  methods: {
    /**
     * @Date: 2021/6/18
     * @param: uuids 选中的或全部数据的 uuid
     * @param: subUuid 子集uuid
     */
    handleOpenDialog(uuids, subUuid = '暂无子集') {
      console.log('打开')
      this.uuids = uuids
      this.getConditionsList()
      this.dialogVisible = true
    },
    handleOffDialog() {
      this.dialogVisible = false
      this.titleName = ''
      this.selectItem = undefined
      this.selectType = undefined
      this.fillData = undefined
      this.$emit('handleOffDialog')
    },
    judgmentNumber() {
      if(typeof this.fillData !== 'number') { this.fillData = '' }
    },
    async handleEditDialog() {
      const { selectItem, fillData } = this
      if (!selectItem) {
        return this.$message.warning('请先选择选项')
      }
      // const result = await postAction(BatchProcess.updateStaff, {
      //   field: selectItem,
      //   uuids: this.uuids,
      //   value: typeof this.fillData === 'number'? String(fillData) :
      //       typeof this.fillData === 'object' ? fillData.join(',') :fillData
      // })
      // if (result.code === 200) this.$message.success('修改成功。')
      this.$emit('handleModifyDialog')
    },
    selectChange(fieldCode) {
      this.fillData = undefined
      this.cascaderOptions = []
      const selectedItem = this.options.find(i => i.fieldCode === fieldCode)
      this.selectType = selectedItem.type
      if (selectedItem.dict) {
        this.getFindByType(selectedItem)
      }
    },
    /* 获取 */
    async getConditionsList() {
      const result = await getAction(queryCondition.conditionsList)
      const filter_item = result.data.find(res => res.type === this.$store.getters.getTableName)
      this.titleName = `【${ filter_item.name }】 -> 批量编辑`
      this.options = filter_item.list
    },
    async getFindByType({ dict }) {
      const { selectType } = this
      const result = await getAction(`/opDictNew/${ selectType === 'tree' ? 'findTreeByType' : 'findByType' }`, { type: dict })
      this.cascaderOptions = result.data
    }
  }
}
</script>

<style scoped>
/*/deep/ .el-cascader .el-input .el-input__inner {*/
/*  height: 40px !important;*/
/*  line-height: 40px !important;*/
/*}*/

/deep/ .el-dialog__body {
  height: 400px !important;
  overflow-y: auto;
}
</style>
<style>
button:focus {
  outline: none !important;
}
</style>
